{% extends "article/base.html" %}
{% load staticfiles %}
{% block title %}article column{% endblock %}
{% block content %}
<div>
    <p class="text-right">
        <button id= "add_column" onclick="add_column()" class="btn btn-primary">add column</button>
    </p>
    <table class="table table-hover">
    	<tr>
    		<td>序号</td>
    		<td>栏目名称</td>
    		<td>操作</td>
    	</tr>
    	{% for column in columns %}
    	<tr>
    		<td>{{ forloop.counter }}</td>
    		<td>{{ column.column }}</td>
    		<td>
                <a name="edit" href="javascript:" onclick="edit_column(this, {{ column.id }})"><span class="glyphicon glyphicon-pencil"></span></a>
                <a name="delete" href="javascript:" onclick="del_column(this, {{ column.id }})"><span class="glyphicon glyphicon-trash" style="margin-left:20px;"></span></a>
            </td>
    	</tr>
    	{% empty %}
    	<p>还没有设置栏目，太懒了。</p>
    	{% endfor %}
    </table>
</div>
</div>
<script type="text/javascript" src='{% static "js/jquery.js" %}'></script>
<script type="text/javascript" src="{% static 'js/layer.js'%}"></script>
<script type="text/javascript">
	function add_column(){
		var index = layer.open({
			type:1,
			skin:"layui-layer-rim",
			area: ["400px", "200px"],
			title: "新增栏目",
			content: '<div class="text-center" style="margin-top:20px"><p>请输入新的栏目名称</p><p>{{column_form.column}}</p></div>',
			btn:['确定', '取消'],
			yes: function(index, layero){
				column_name = $('#id_column').val();
				$.ajax({
					url:'{% url "article:article_column" %}',
					type:'POST',
					data:{"column":column_name},
					success:function(e){
						if(e=="1"){
							parent.location.reload();
							layer.msg("good");
						}else{
							layer.msg("此栏目已有，请更换名称")
						}
					},
				});
			},
			btn2: function(index, layero){
				layer.close(index);
			}
		});
    }
    
    function edit_column(the, column_id){
	    var name = $(the).parents("tr").children("td").eq(1).text();
	    var index = layer.open({
		type: 1,
		skin: "layui-layer-rim",
        area: ["400px", "200px"],
        title: "编辑栏目",
        content: '<div class="text-center" style="margin-top:20px"><p>请编辑的栏目名称</p><p><input type="text" id="new_name" value="'+name+'"></p></div>',
        btn:['确定', '取消'],
        yes: function(index, layero){
       	    new_name = $("#new_name").val();
           	$.ajax({
            	url: "{% url 'article:rename_article_column' %}",
            	type: "POST",
            	data: {"column_id": column_id, "column_name": new_name},
            	success: function(e){
            		if(e=="1"){
            			parent.location.reload();
            			layer.msg("good");
            		}else{
            			layer.msg("新的名称没有保存,修改失败。")
            		    }
            	    },
                });
            },
	    });
    }

    function del_column(the, column_id){
	var name = $(the).parents("tr").children("td").eq(1).text();
	layer.open({
		type: 1,
		skin: "layui-layer-rim",
		area: ["400px", "200px"],
		title: "删除栏目",
		content: '<div class="text-center" style="margin-top:20px"><p>是否确定删除{'+name+'}栏目</p></div>',
		btn:['确定', '取消'],
		yes: function(){
			$.ajax({
				url: '{% url "article:del_article_column" %}',
				type:"POST",
				data: {"column_id":column_id},
				success: function(e){
					if(e=="1"){
						parent.location.reload();
						layer.msg("has been deleted.");
					}else{
						layer.msg("删除失败");
					    }
				    },
			    })	
		    },
	    });
    }


</script>

{% endblock %}
